<template>
	<view class="content">
		<view class="search-box">
			<image class='search-icon' src='/static/image/zoom.png'></image>
			<input type="text" class='search-input' placeholder='小米智能手表'
			 v-model="key" focus :auto-focus="focus" :fixed="focus"></input>
			 <icon class="clear-icon" type="clear" size="26" v-if="key" @click="key=''"/>
			<span class="search-text" @click="search">搜索</span>
		</view>
		<view class="history-c" v-show="keys.length > 0">
			<view class="history-title">
				<view class='ht-left'>历史记录</view>
				<view class='ht-right' @click="deleteKey">清空</view>
			</view>
			<view class="history-body">
				<view class="hb-item" v-for="(item, key) in keys" :key="key" @click="toNav(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="history-c" v-show="hotKeys.length > 0">
			<view class="history-title">
				<view class='ht-left'>热门搜索<text class="hot">H O T</text></view>
			</view>
			<view class="history-body">
				<view class="hb-item" v-for="(item, index) in hotKeys" :key="index" @click="toNav(item)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 热销榜 -->
		<view class='title'>热销榜</view>
		<product-list :productList="productList"></product-list>
	</view>
</template>

<script>
	import productList from '@/components/product-list.vue'
	export default {
		components: {
			productList
		},
		data() {
			return {
				hotKeys: ['iphone15','小米净水器','海信电视75寸','五常大米','金龙鱼','男士T恤','nike空军1号'],
				keys: [],
				key: '',
				navType: 'toNav',
				focus: true,
				productList:[]//热销商品前十
			}
		},
		computed: {
			recommend() {
				// return this.$store.state.config.recommend_keys
				return []
			}
		},
		methods: {
			//搜索
			search: function() {
				let keys = this.key;
				if (keys != '') {
					let search_key = uni.getStorageSync('search_key');
					if (!search_key) {
						search_key = [];
					}
					let flag = true;
					for (var key in search_key) {
						if (search_key[key] == keys) {
							flag = false;
						}
					}
					if (flag) {
						search_key.unshift(keys);
					}
					uni.setStorageSync('search_key', search_key)
					uni.setStorageSync('search_term', keys)
				}
				/* this.$api.prePage().resetPage(); */
				if(this.$api.prePage().setSearchKey){
					this.$api.prePage().setSearchKey(keys);
				}
				/* 搜索后跳转到商品列表页 */
				uni.navigateTo({
					url:'/pages/product/list?searchKey='+keys
				})
				/* this.$api.prePage().search();
				uni.navigateBack({
					delta:1
				}) */
			},

			//清除
			deleteKey: function() {
				//删除显示
				this.keys = [];
				//删除存储
				uni.removeStorageSync('search_key')
				// this.$db.del('search_key');
			},

			//跳转操作
			toNav: function(keys) {
				// this.$db.set('search_term', keys);
				uni.setStorageSync('search_term', keys)
				let search_key = uni.getStorageSync('search_key');
				// let search_key = this.$db.get('search_key');
				if (!search_key) {
					search_key = [];
				}
				var flag = true;
				for (var key in search_key) {
					if (search_key[key] == keys) {
						flag = false;
					}
				}
				if (flag) {
					search_key.unshift(keys);
				}
				uni.setStorageSync('search_key', search_key);
				this.$api.prePage().setSearchKey(keys);
				/* 搜索后跳转到商品列表页 */
				uni.navigateTo({
					url:'/pages/product/list?searchKey='+keys
				})
				/* this.$api.prePage().search(keys);
				uni.navigateBack({
					delta:1
				}) */
			},
			//热销前十
			loadHotProduct() {
				var keyArray = [];
				keyArray.push('ON_SALE');
				let searchData = {
					'keyArray': keyArray,
					'onSale': true,
					'startIndex': 0,
					'pageSize': 10,
					'sort': 'desc',
					'sortBy': 'soldUnit'
				};
				this.searchProduct(searchData);
			},
			//查询指定条件下的商品
			searchProduct(searchData) {
				//加载中
				this.loadingType = 'loading';
				this.$api.request.goodsList(searchData, res => {
					if (res.body.status.statusCode === '0') {
						this.productList = res.body.data.products;
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			//商品详情
			navToDetailPage(item){
				let id = item.productUuid;
				uni.navigateTo({
					url: '/pages/product/product?id='+id
				})
			},
		},
		onLoad(options){
			this.loadHotProduct();
		},
		//加载触发
		onShow(e) {
			this.keys = uni.getStorageSync('search_key');
			this.key = uni.getStorageSync('search_term');
			this.focus = true;
		},
		//页面卸载触发
		onUnload() {
			uni.setStorageSync('search_term', '');
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	.search-box {
		width: 90%;
		padding: 20upx 20upx;
		position: relative;
		.search-input {
			flex: 1;
			height: 100upx;
			line-height: 100upx;
			text-align: left;
			padding-left: 100upx;
			padding-right: 120upx;
			font-size: $font-base;
			color: $font-color-light;
			border: 1px solid $border-color-focus;
			border-radius: 20px;
			background: #ffffff;
		}		
		.search-icon {
			position: absolute;
			width: 80upx;
			height: 80upx;
			top: 72upx;
			transform: translateY(-50%);
		}
		.clear-icon {
			position: absolute;
			top: 72upx;
			right: 150upx;
			transform: translateY(-50%);
		}
		
		.search-text {
			position: absolute;
			top: 68upx;
			right: 60upx;
			color: $base-color;
			font-size: $font-lg;
			transform: translateY(-50%);
		}
	}

	.history-c {
		padding: 20upx 26upx;
	}

	.history-title {
		overflow: hidden;
	}

	.ht-left {
		float: left;
		font-size: $font-lg;
		font-weight: bold;
		color: $font-color-dark;
		.hot{
			margin-left: 5px;
			color: $base-color;
		}
	}

	.ht-right {
		float: right;
		color: $font-color-light;
		font-size: $font-base;
	}

	.history-body {
		overflow: hidden;
		margin-top: 20upx;
		min-height: 200upx;
	}

	.hb-item {
		display: inline-block;
		float: left;
		background-color: #fff;
		color: $font-color-base;
		margin-right: 20upx;
		margin-bottom: 30upx;
		font-size: $font-lg;
		padding: 10upx 20upx;
	}
	.title {
		color: $uni-color-warning;
		font-weight: bold;
		font-size: $font-lg;
		padding: 26upx;
	}
</style>
